<template>
	<view class="page_box">
		<view class="notice-center flex " v-for="(item,index) in newestListFrom" :key="index" style="padding: 0 30rpx;width: 100%;">
			<view class="bgc mr31 " @click="l.to('/pages/home/headInfo?dynId=' + item.did + '&userId=' + item.id)" style="width: 16%;">
				<!-- <image bgc src="../../../../static/img/head.png" mode=""></image> -->
				<image class=" w90 h90 r45 " :src="item.headImg" mode=""></image>
				
			</view>
			<view class="" style="width: 78%;">
				<view class="mb24 flex align-center">
					<text style="font-weight: bold;color: #000000;" class="f30">{{item.nickName}}</text>
					<i class="ml25 cuIcon-male f20" style="color: #40C6A8; font-weight: 700;" v-if="item.sex == 1"></i>
					<i style="color:#FF2B8A; font-weight: 700;" class="cuIcon-female ml25 f20" v-else></i>
					<text>{{item.age}}</text>
					<view class="bgc-text1" v-if="item.isAuth == 1">
						<i class="cuIcon-check" ></i>认证
					</view>
				</view>
				<view class="" @click="l.to('/pages/home/dynamicInfo?dynId=' + item.did + '&userId=' + item.id)">
					<view class="flex align-center mb34">
						<view class="bgc-text">
							{{item.headTitle}}
						</view>
						<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
						<image v-if="item.menberLabel == -1" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
						<image v-if="item.menberLabel == 0" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
						<image v-if="item.menberLabel == 1" src="../../../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
						<image v-if="item.menberLabel == 2" src="../../../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
						<image v-if="item.menberLabel == 3" src="../../../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
						<image v-if="item.menberLabel == 4" src="../../../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
					</view>
					<view class="mb29 f24">
						<!-- {{{{$u.timeFrom(timestamp, 'yyyy年mm月dd日')}}}} 1小时前 -->
						<text style="color: #666666;"> {{item.addDate}}
							<!-- {{$u.timeFrom(item.addDate, format = String | true)}} -->
						</text>
						<text class="ml35 " style="color: #999999;">星榜：{{item.starNum}}</text>
					</view>
				</view>

				<view class="">
					<text style="color: #333333;">{{item.dynamic}}!</text>
				</view>
				<view class="flex r10 pt30 flex-wrap" >
					<image class="w174 h174 r10 mr22" v-for="(item1, index) in item.apiUserDynamicImgList" :key="index" :src="item1.img" mode=""></image>
					
				</view>
				<view class="mt22">
					<text style="color: #40C6A8;" @click="l.to('/pages/home/travel/travel')"
					v-for="(item1,index) in item.apiUserDynamicTopics" :key="index">#{{item1.topic}}</text>

					<view class="f22 flex justify-between mt18 mb53" style="color: #666666;">
						<view class="">
							<i class="cuIcon-location"></i>
							<text class="ml17">{{item.address}}</text>
						</view>

						<view class="">
							<i class="cuIcon-like" v-if="item.isLove == 0"></i>
							<i style="color:#FF2B8A;" class="cuIcon-likefill" v-else></i>
							<text class="mr21 ml8">{{item.loveNum}}</text>
							<i class="cuIcon-message"></i>
							<text class="mr21 ml8">{{item.commentNum}}</text>
							<i class="cuIcon-favor" v-if="item.isCollect == 0" @click="alterProp = true"></i>
							<i class="cuIcon-favor" style="color:#FF2B8A;" v-else @click="alterProp = true"></i>
							<text class="ml8">{{item.collectNum}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>






		<u-popup v-model="alterProp" height="900" mode="bottom">
			<view class="alter-box">
				<view class="ww100 h160 bgc-tra">
				</view>
				<view class="hh82" style="background-color: #FFFFFF; border-radius: 20rpx 20rpx 0 0;">

					<view class="flex justify-between align-center pl60 pr53">
						<view class=" flex align-center">
							<image src="../../../../static/img/icon.png" class="w140 h140 bgc-top" mode=""></image>
							<view class="ml38 f34">
								<text>星星余额：10</text>
							</view>
						</view>
						<view class="" @click="alterProp = false">
							<i class="cuIcon-close f40"></i>
						</view>
					</view>
					<block v-for="(item, index) in fromlist" :key="index" >
						<view class="flex align-center justify-around fl mt64 flex-wrap padd-auto" style="background-color: #FFFFFF;"
							>
							<view class="w180 h180 text-center" :class="border == index ? 'bor' : ''" @click="roadAdd(index)">
								<image src="@/static/img/icon-one.png" class="w100 h100" mode=""></image>
								<view>
									<text style="color: #C88722;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</block>
					
					<view class="flex f30 pt50 pr55 pl55 mb60 align-center justify-between">
						<view class=" w280 h80 lh80 r40 text-center"
							style="background: linear-gradient(270deg, #F3C876, #C88722);
							color: #FFFFFF;" @click="toUp">
							充值
						</view>
						<view class=" w280 h80 lh80 r40 text-center"
							style="background: linear-gradient(270deg, #F3C876, #C88722);color: #FFFFFF;"
							@click="toUp">
							<!-- balanceAdd = true -->
							立即赠送
						</view>
					</view>
				</view>

			</view>
		</u-popup>
		
		
		<u-popup v-model="balanceAdd" width="520" border-radius="20" mode="center">
			<view class="mt54 text-center">
				您的余额不足
			</view>
			<view class="mt45 ww100 text-center mb65" @click="l.to('/pages/home/upMoney')">
				<button type="default" class="cu-btn r12 btn-bgc">充值</button>
			</view>
		</u-popup>
		
		

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			newestListFrom: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				alterProp: false,
				balanceAdd: false,
				fromlist: [{
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}, {
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}, {
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}, {
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}, {
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}, {
					icon: '@/static/img/icon-one.png',
					name: '1星星',
				}],
				border: 0,
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			roadAdd(index) {
				this.border = index
			},
			
			toUp() {
				this.alterProp = false
				this.balanceAdd = true
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {

		.notice-center {
			width: 100%;

			.bgc {
				width: 90rpx;
				height: 90rpx;
				border-radius: 47rpx;
			}
			
			.bgc-text1 {
				margin-top: 10rpx;
				color: #FFFFFF;
				border-radius: 10rpx;
				padding: 5rpx 10rpx;
				color: #999;
				margin-left: 10rpx;
				font-size: 20rpx !important;
				border: 2rpx solid #FCC81C;
			}

			.bgc-text {
				padding: 4rpx 12rpx;
				border-radius: 30rpx;
				font-size: 20rpx;
				color: #40C6A8;
				margin-right: 10rpx;
				// box-shadow: inset 0px -1px 1px -1px #40C6A8;
				border: 2rpx solid #40C6A8;
			}
		}

		.alter-box {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			
			.bor {
				border-radius: 10rpx;
				border: 2rpx solid #FBB03B;
			}
			
			// .bor::after {
			// 	content: '';
			// 	width: 50rpx;
			// 	height: 6rpx;
			// 	background: #FBB03B;
			// 	border-radius: 3rpx;
			// 	margin-top: 15rpx;
			// }

			.bgc-tra {
				background-color: transparent !important;
			}

			.alter-box-center {
				width: 100%;
				height: 100%;
				// margin-top: 50rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
			}

			.bgc-top {
				margin-top: -40rpx;
			}
			
			.padd-auto {
				padding: 0 54rpx;
			}
			
			.padd-auto:nth-child(3n+0) {
				padding: 0 0rpx;
			}
		}

		/deep/.u-drawer-bottom[data-v-ece9ae1c] {
			bottom: 0;
			left: 0;
			right: 0;
			background-color: transparent !important;
		}
		
		.btn-bgc {
			width: 194rpx;
			height: 70rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			background-color: #000000;
		}
	}
</style>
